import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { useArgs } from '@storybook/client-api';
import { ColorSwatchDialog } from '@zendeskgarden/react-colorpickers';
import { ColorSwatchDialogStory } from './stories/ColorSwatchDialogStory';
import { COLOR_SWATCH_COLORS as COLORS } from './stories/data';
import README from '../README.md';

<Meta
  title="Packages/Colorpickers/ColorSwatchDialog"
  component={ColorSwatchDialog}
  args={{
    buttonProps: { 'aria-label': 'Label' },
    'aria-label': 'Title',
    colors: COLORS,
    isAnimated: true,
    name: 'name'
  }}
  argTypes={{
    focusInset: { control: 'boolean' },
    hasArrow: { control: 'boolean' },
    zIndex: { control: 'number' }
  }}
  parameters={{
    design: {
      allowFullscreen: true,
      type: 'figma',
      url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=4102%3A31515'
    }
  }}
/>

# API

<ArgsTable />

# Demo

## Uncontrolled

<Canvas>
  <Story
    name="Uncontrolled"
    argTypes={{
      selectedColIndex: { control: false },
      selectedRowIndex: { control: false }
    }}
  >
    {args => <ColorSwatchDialogStory {...args} />}
  </Story>
</Canvas>

## Controlled

<Canvas>
  <Story
    name="Controlled"
    args={{ isOpen: false, selectedRowIndex: 0, selectedColIndex: 5 }}
    argTypes={{
      defaultSelectedColIndex: { control: false },
      defaultSelectedRowIndex: { control: false },
      selectedColIndex: { control: { type: 'number' } },
      selectedRowIndex: { control: { type: 'number' } }
    }}
  >
    {args => {
      const updateArgs = useArgs()[1];
      const handleChange = ({ isOpen }) => updateArgs({ isOpen });
      const handleSelect = (selectedRowIndex, selectedColIndex) =>
        updateArgs({ selectedRowIndex, selectedColIndex });
      return (
        <ColorSwatchDialogStory {...args} onDialogChange={handleChange} onSelect={handleSelect} />
      );
    }}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
